<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Live Data Panel Example</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.com/deploy/dev/resources/css/ext-all.css" />
	<link rel="stylesheet" type="text/css" href="live-data-panel.css" />
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script><script type="text/javascript">_uacct = "UA-1396058-1";urchinTracker();</script>
 	<link rel="stylesheet" type="text/css" href="../../resources/css/xtheme-default.css" /><!-- LIBS -->
 	<script type="text/javascript" src="http://extjs.com/deploy/dev/adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->	
    <script type="text/javascript" src="http://extjs.com/deploy/dev/ext-all.js"></script>
	<script type="text/javascript" src="LiveDataPanel.js"></script>

	<script type="text/javascript">
		Ext.onReady(function(){
			// Create our Ext Data Store to read the blog entries
			var myStore = new Ext.data.JsonStore({
			    root: 'results',
			    totalProperty: 'total',
			    url: 'data/blog.php',
			    autoLoad:true,
			    sortInfo: {
			        field: 'post_date',
			        direction: 'DESC'
			    },
			    fields: [
			        'guid', 
			        'post_title', 
			        'post_excerpt', 
			        'post_author_name', 
			        'post_icon',
			        {name: 'post_date', type: 'date', dateFormat: 'Y-m-d H:i:s'}
			    ]
			});
			
			// Creating the panel is easy
			var p = new Ext.ux.LiveDataPanel({
			    frame: true,
			    title: 'Latest Blog Entries',
			    height: 400,
			    width: 590,
			    itemSelector: '.entry',
			    tpl: Ext.XTemplate.from('tplBlog'),
			    store: myStore
			});
			p.render('entry-list');
		});			
	</script>

</head>
<body>
<h1>LiveDataPanel Extension</h1>
<p>Live sample loading data from the Ext JS Blog RSS feed.</p>
<div id="entry-list"></div>

<textarea id="tplBlog" class="x-hidden">
<tpl for=".">
	<div class="entry">
		<a rel="bookmark" href="{guid}" class="entry-title" target="_blank">{post_title}</a>
	    <div class="excerpt">
	    	<a href="{guid}" target="_blank"><img class="post-icon" src="{post_icon}"/></a>
			<p>{post_excerpt}</p>		
			<div style="clear: both;"></div>
	    </div>
		<h4><a href="{guid}" class="view-post" target="_blank">View Post &raquo;</a>{post_date:date("F j, Y")} by {post_author_name}</h4>
	</div>	
</tpl>
</textarea>
</body>
</html>
